<template>
	<!-- tab搜索 -->
	<view class="part-time-box">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<!-- 组件 -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in swiperImgList" :key="index">
					<view class="swiper-item">
						<img class="swiper_img" :src="item.url" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 定位、搜索 -->
		<view class="tabLan">
			<view class="tab-box">
				<!-- 定位图标 -->
				<view class="img_dizhi" @click="showIp">
					<img src="../../../static/images/partTime/locateIcon.png" class="locateIcon" />
					<span>龙泉驿</span>
				</view>

			</view>
		</view>
	</view>

	<!-- 限时活动 -->
	<view class="current-activities-box">
		<view class="my-current">
			<view class="current-left">
				<span class="spanCurrent">限时活动</span>
				<!-- 倒计时组件 -->
				<uni-countdown class="countdownMy" :show-day="false" :hour="12" :minute="10" :second="10" />
			</view>
			<view class="current-right">
				<span class="moreIcon" @click="activityPage()">更多</span>
				<van-icon name="arrow" />
			</view>
		</view>

		<!-- 活动 -->
		<view class="activities-box">
			<!-- 可滚动视图容器 scroll-view -->
			<scroll-view scroll-x>
				<view class="item_list" v-for="(item,index) in activeList" :key="index">
					<img class="activeImg" :src="item.url" alt="" />
					<p class="activeText">{{item.title}}</p>
				</view>
			</scroll-view>
		</view>
	</view>

	<!-- 优选兼职 -->
	<view class="Optimization-box">
		<!-- 兼职选择栏 -->
		<view class="my-current">
			<view class="current-left">
				<span class="spanCurrent">优选兼职</span>
			</view>
			<view class="changesCurrent">
				<ul class="my_ul">
					<li class="liList li_choosed">推荐</li>
					<li class="liList">附近</li>
					<li class="liList">最新</li>
				</ul>
				<span class="underline">推荐</span>
			</view>
			<view class="current-rightTwo">
				<span class="moreIcon">筛选</span>
				<van-icon name="bars" />
			</view>
		</view>
	</view>
	
	<!-- 兼职列表 -->
	<view class="part-time-list">
		<view class="">
			
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 轮播图list
				swiperImgList: [{
						url: '../../../static/images/partTime/lunbo1.jpg'
					},
					{
						url: '../../../static/images/partTime/lunbo2.jpg'
					},
					{
						url: '../../../static/images/partTime/lunbo3.jpg'
					},
				],
				indicatorDots: true, // 轮播图圆点
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 限时活动图片list
				activeList: [{
						title: '1元秒杀',
						url: '../../../static/images/partTime/active1.jpg'
					},
					{
						title: '活动标题xxx',
						url: '../../../static/images/partTime/active2.jpg'
					},
					{
						title: '活动标题xxx',
						url: '../../../static/images/partTime/active3.jpg'
					},
					{
						title: '1元秒杀',
						url: '../../../static/images/partTime/active4.jpg'
					},
					{
						title: '活动标题xxx',
						url: '../../../static/images/partTime/active5.jpg'
					},
					{
						title: '活动标题xxx',
						url: '../../../static/images/partTime/active6.jpg'
					}
				]
			}
		},
		onLoad() {

			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function (res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 	}
			// });
		},
		methods: {
			activityPage() {
				uni.navigateTo({
					url: "/pagesCamousLeaderPage/activity/activity"
				})
			}
			// showIp(){
			// 	uni.chooseLocation({
			// 		success: function (res) {
			// 			console.log('位置名称：' + res.name);
			// 			console.log('详细地址：' + res.address);
			// 			console.log('纬度：' + res.latitude);
			// 			console.log('经度：' + res.longitude);
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	// tab搜索
	.part-time-box {
		position: relative;

		// 轮播图
		.uni-margin-wrap {
			width: 100%;
			position: relative;
			z-index: -1;

			.swiper {
				height: 550rpx;

				.swiper-item {
					display: block;
					height: 700rpx;

					.swiper_img {
						width: 105%;
						height: 100%;
					}
				}
			}
		}

		// 定位、搜索
		.tabLan {
			width: 100%;
			height: 60rpx;
			border-bottom: 1rpx solid whitesmoke;
			position: absolute;
			top: 20%;

			.tab-box {
				width: 72%;
				padding: 0rpx 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.img_dizhi {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;

					.locateIcon {
						width: 35rpx;
						height: 35rpx;
						vertical-align: middle
					}
				}


			}
		}
	}

	// 限时活动
	.current-activities-box,
	.Optimization-box {
		margin-top: 16rpx;
		padding: 0rpx 20rpx;
		background-color: white;
		width: 100%;
		height: 355rpx;

		.my-current {
			display: flex;
			//flex-shrink: 0;

			.current-left {
				margin-right: 20rpx;
				width: 50%;
				height: 40px;
				display: flex;
				align-items: center;

				.spanCurrent {
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}

				// 倒计时组件
				.countdownMy {
					font-weight: bold;
					font-style: italic;
				}
			}

			.current-right {
				width: 43%;
				height: 40px;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.moreIcon {
					margin-right: 10rpx;
				}
			}
		}

		// 活动
		.activities-box {
			padding-right: 20rpx;
			width: 92%;
			height: 108px;
			overflow: hidden;
			white-space: nowrap;
			padding: 20rpx 15rpx 20rpx 20rpx;
			background-color: #efefef;
			border-radius: 10rpx;

			scroll-view {
				height: 105px;

				.item_list {
					width: 170rpx;
					height: 100%;
					display: inline-block;
					margin-right: 10px;
					padding: 20rpx 20rpx 50rpx 20rpx;
					background-color: white;
					border-radius: 15rpx;
					box-sizing: border-box;
					// margin-top: -10rpx;

					.activeImg {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					.activeText {
						font-size: 22rpx;
						text-align: center;
						line-height: 42rpx;
					}
				}
			}
		}
	}

	// 优选兼职
	.Optimization-box {
		height: 85rpx;
		.changesCurrent {
			width: 65%;
			position: relative;

			.my_ul {
				.liList {
					float: left;
					padding-right: 55rpx;
					height: 50rpx;
					font-size: 24rpx;
					line-height: 80rpx;
					color: black;
					// border-bottom: 1px solid #e5e5e5;
				}
				.li_choosed {
					font-weight: bold;
				}
			}
			// 下划线
			.underline {
				/* 将文字隐藏 */
				color: hsla(0, 0%, 100%, 0);
				font-size: 24rpx;
				height: 50rpx;
				line-height: 80rpx;
				border-bottom: 4rpx solid black;
				position: absolute;
				left: 0px;
				top: 10rpx;
				transition: width, left .4s linear;
			}
		}
		.current-rightTwo{
			width: 23%;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			.moreIcon {
				margin-right: 10rpx;
			}
		}
	}
	
	// 兼职列表



	// .img_dizhi {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-size: 12px;
	// 	width: 100px;
	// 	height: 50px;
	// }

	// .img_dizhi_img {
	// 	width: 40px;
	// 	height: 40px;
	// }

	// .kefu_box {
	// 	display: flex;
	// 	align-items: center;

	// 	// justify-content: center;
	// 	.labei_text {
	// 		font-weight: bold;
	// 		font-size: 15px;
	// 	}

	// 	.labei_text_a {
	// 		font-size: 12px;
	// 		color: #ccc;
	// 	}
	// }

	// .img_logo {
	// 	width: 50px;
	// 	height: 50px;
	// 	margin-right: 10px;
	// }
</style>